<template>
    <div class='box'>
      <!-- 登录内容表单 -->
      <div class="login">
        <img src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" alt="" style="width:120px;margin-top:120px">
        <van-form class="form" @failed="onFailed">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="loginName"
            label="用户名"
            name="name"
            placeholder="用户名"
            :rules="[{ pattern, message: '请输入用户名' }]"
          /> 
          <van-field
            v-model="pwd"
            label="密码"
            name="pwd"
            placeholder="密码"
            :rules="[{ pattern, message: '请输入密码' }]"
          />  
          <van-field
            v-model="code"
            label="验证码"
            name="code"
            placeholder="验证码" 
            center
            clearable  
          >
            <template #button> 
                <VerificationCode :changeCode.sync='identifyCode'></VerificationCode> 
            </template>
          </van-field> 
          <p class="reg">
            <span @click="toReg"><span>{{msg == "登录" ? "立即注册" : "已有登录账号?"}}</span></span>
          </p>
        </van-cell-group>
        <div style="margin: 16px;padding:0 15px;">
          <van-button round block type="primary" native-type="submit" @click="doLogin">
            {{msg}}
          </van-button>
        </div>
      </van-form> 
      </div>
      <!-- 顶部搜索框 -->
      <div class="top">
        <b class="left">
          <van-icon name="arrow-left" @click="goHome"/>
        </b>
        
        <div class="search">
          {{msg}}
        </div>
        <div class="right"><van-icon name="weapp-nav" /></div>
      </div> 
    </div>
</template>

<script>
// 引入md5进行密码加密
import md5 from "js-md5";
import VerificationCode from "../components/slider.vue";
import { Field, CellGroup, Toast } from "vant";
import { ref, reactive, onUpdated } from "vue";
import api from "../http/api.js";
// 引入vuex
import { useStore } from "vuex";
export default {
  components: { VerificationCode },
  setup(props) {
    // 获取vuex
    const store = useStore();
    const loginName = ref(""); //用户名
    const pwd = ref(""); //密码
    const code = ref(""); //验证码
    const pattern = /\d{1,}/;
    const onFailed = errorInfo => {
      // console.log("failed", errorInfo);
    };
    // 返回首页
    const goHome = () => {
      //   将active值重置
      store.commit("setTab", { act: 0, isShow: true });
      location.href = "/#/home";
    };
    const identifyCode = ref(store.state.code); //当前生成的验证码
    // 判断登录页面还是注册页面
    const msg = ref("登录"); // 登录页面
    // 点击登录
    const doLogin = () => {
      // 判断是否输入验证码
      if (code.value == "" || code.value != store.state.code) {
        // 提示验证码有误
        Toast.fail("验证码有误");
        return false;
      }
      console.log(msg, "登录or注册页面");
      // 判断点击的是登录还是注册
      if (msg.value == "登录") {
        // 封装数据
        let obj = {
          loginName: loginName.value,
          passwordMd5: md5(pwd.value)
        };
        // 请求登录接口
        api.setLogin(obj).then(res => {
          console.log(res, "请求登录接口");
          // 判断状态码
          if (res.data.resultCode == 200) {
            // 存储token值
            localStorage.setItem("token", res.data.data);
            // 进行跳转对应的页面
            store.commit("setTab", { act: 0, isShow: true });
            // 进入首页
            location.href = "/#/home";
          }
        });
      } else {
        console.log("要去请求注册");
        // 封装数据
        let obj = {
          loginName: loginName.value,
          password: pwd.value
        };
        // 请求登录接口
        api.setReg(obj).then(res => {
          console.log(res, "请求注册接口");
          if (res.data.resultCode == 200) {
            msg.value = "登录";
            loginName.value = "";
            pwd.value = "";
            code.value = "";
            Toast.success("注册成功");
          }
        });
      }
    };
    // 去注册页面
    const toReg = () => {
      msg.value = msg.value == "登录" ? "注册" : "登录";
      console.log(msg.value, "去注册页面");
      // 重置表单所有数据
      loginName.value = "";
      pwd.value = "";
      code.value = "";
    };
    return {
      goHome,
      loginName,
      pwd,
      code,
      pattern,
      onFailed,
      identifyCode,
      msg,
      doLogin,
      toReg
    };
  }
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  // 顶部搜索框
  .top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    // 中间搜索框
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
  .login {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .form {
      width: 100%;
      height: 500px;
      padding: 20px;
      // 注册区域
      .reg {
        width: 100%;
        height: 70px;
        line-height: 100px;
        padding: 0 30px;
        text-align: left;
        font-size: 28px;
        color: #1d9be9;
      }
    }
  }
}
</style>
